<template>
	<view v-if="order_info.order_goods_status">
		<view class="order_info">
			<view class="part_title">订单详情</view>
			<view class="order_info_item">
				<view class="order_info_title">订单编号：</view>
				<view>{{order_info.order_no}}</view>
			</view>
			<view class="order_info_item">
				<view class="order_info_title">下单时间：</view>
				<view>{{order_info.create_time}}</view>
			</view>
			<view class="order_info_item" v-if="order_info.order_goods_status[0]!=1">
				<view class="order_info_title">支付方式：</view>
				<view>{{order_info.pay_type}}</view>
			</view>
			<view class="order_info_item" v-if="order_info.order_goods_status[0]!=1">
				<view class="order_info_title">支付时间：</view>
				<view>{{order_info.pay_time}}</view>
			</view>
			<view class="order_info_item">
				<view class="order_info_title">商品总额：</view>
				<view>¥{{order_info.total_price}}</view>
			</view>
			<view class="order_info_item">
				<view class="order_info_title">运费：</view>
				<view>¥{{order_info.express_price}}</view>
			</view>
			<view class="order_info_item">
				<view class="order_info_title">优惠金额：</view>
				<view>—¥{{order_info.coupon_money}}</view>
			</view>
			<view class="order_info_item" v-if="order_info.order_source == 2">
				<view class="order_info_title">券：</view>
				<view>¥{{order_info.points_num}}</view>
			</view>
			<view class="order_info_item">
				<view class="order_info_title">实付款：</view>
				<view style="color: #FA3534;">¥{{order_info.pay_price}}</view>
			</view>
		</view>
		<view class="goods_box" v-for="(item,index) in order_info.goods" :key="index">
			<view class="goods_img">
				<image :src="item.image"></image>
			</view>
			<view class="goods_info">
				<view class="u-line-2">{{item.goods_name}}</view>
				<view class="goods_norms u-line-1">数量：{{item.total_num}}；{{item.goods_attr}}</view>
				<view class="price_box">
					<view style="margin-right: 20rpx;">¥{{item.goods_price}}</view>
					<view>
						<u-tag border-color="#20cbd4" bg-color="#20cbd4" 
						color="#fff" :text="item.goods_status_txt" 
						shape="circle" />
					</view>
				</view>
			</view>
		</view>
		
		<view class="order_info">
			<view class="part_title">售后原因</view>
			<u-checkbox-group @change="checkboxGroupChange" :wrap="true" active-color="#20cbd4">
				<u-checkbox v-model="item.checked" 
					v-for="(item, index) in checkList" :key="index" 
					:name="item.name"
				>{{item.name}}</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="order_info">
			<view class="part_title">相关描述</view>
			<view class="afterSale_box">
				<view class="edit_afterSale">
					<u-input v-model="afterSale_val" type="textarea" :height="150" :auto-height="false" />
					<u-upload @on-choose-fail="onChooseFail" :width="180" :height="180" :before-remove="beforeRemove" ref="uUpload" :action="action" :auto-upload="false" 
						:file-list="fileList" :header="header" :formData="formData"
						del-bg-color="rgba(0,0,0,0)" del-color="#fa3534"
						:show-progress="false" :max-count="3" @on-list-change="onListChange" @on-Success="onSuccess">
					</u-upload>
				</view>
			</view>
		</view>
		<view style="padding-bottom: 40rpx;">
			<u-button @click="submit" :custom-style="customStyle" shape="circle">申请售后</u-button>
		</view>
		<u-toast ref="uToast" />
		<hoverMenu></hoverMenu>
	</view>
</template>

<script>
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import {orderDetail,refundInfo,refundApply} from "@/common/api.js";
	export default {
		components: {
			hoverMenu
		},
		data() {
			return {
				order_no:"",
				order_info:{},
				afterSale_val:"",
				user_refund_desc:"",
				// 上传地址示例，非真实地址
				// #ifdef H5
				action: '/api/upload_image',
				// #endif
				// #ifndef H5
				action: 'https://wap.yunxingzhan.com/api/upload_image',
				//action: 'https://testwap.yunxingzhan.com/api/upload_image',
				// #endif
				header:{"Authori-zation":uni.getStorageSync('Authori-zation'),},
				formData:{path:"refund"},
				// 预置上传列表
				fileList: [],
				lists: [], // 组件内部的文件列表
				customStyle:{
					background:'#20cbd4',
					color:'#fff',
					margin:'80rpx 40rpx'
				},
				order_id:"",
				checkList: [],
				fileids:[],//上传图片成功返回的图片id
			}
		},
		onLoad(options) {
			this.order_id = options.order_id;
			orderDetail(this,{order_id:options.order_id});
			refundInfo(this,{});
		},
		methods: {
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			onChooseFail(e) {
				// console.log(e);
			},
			beforeRemove(index, lists) {
				return true;
			},
			onListChange(lists) {
				// console.log('onListChange', lists);
				this.lists = lists;
			},
			deleteItem(index) {
				this.$refs.uUpload.remove(index);
			},
			submit(){
				if(this.user_refund_desc==""){
					this.$refs.uToast.show({title: '请选择售后原因',})
					return;
				}
				uni.showLoading({
					title:'保存中...'
				});
				//上传图片
				if(this.lists.length>0){
					this.$refs.uUpload.upload();
				}else{
					refundApply(this,{order_id:this.order_id,apply_desc:this.afterSale_val,user_refund_desc:this.user_refund_desc.join(',')})
				}
			},
			checkboxGroupChange(e) {
				 this.user_refund_desc = e;
			},
			onSuccess(data,index,lists,name){
				var fileid = [];
				this.fileids = this.fileids+data.data.file_id+",";
				if(this.lists.length == index+1){
					refundApply(this,{order_id:this.order_id,apply_desc:this.afterSale_val,user_refund_desc:this.user_refund_desc.join(','),image_id:this.fileids})
				}
			}
		}
	}
</script>

<style>
	page{
		font-family: PingFang SC;
		background: #f6f6f6;
	}
	.part_title{
		margin-bottom:20rpx;
		font-size : 32rpx;
		font-weight: bold;
	}
	.goods_box{
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 20rpx;
		display: flex;
	}
	.goods_img{
		width: 200rpx;
		height: 200rpx;
	}
	.goods_img image{
		width: 100%;
		height: 100%;
	}
	.goods_info{
		margin-left: 10rpx;
		width: 500rpx;
	}
	.goods_norms{
		margin-top: 20rpx;
		font-size: 25rpx;
		color: #909399;
	}
	.price_box{
		display: flex;
		align-items: flex-end;
		margin-top: 20rpx;
		height: 50rpx;
	}
	.order_info{
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 20rpx 50rpx;
	}
	.order_info_item{
		display: flex;
		margin-bottom: 15rpx;
	}
	.order_info_title{
		color: #909399;
	}
	.order_price{
		display: flex;
		justify-content: space-between;
	}
	.afterSale_box{
		background-color: #FFFFFF;
		padding: 20rpx 40rpx;
	}
	.afterSale_box text{
		margin-right: 15rpx;
	}
	.edit_afterSale{
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 15rpx;
		background-color: #f9fafb;
	}
</style>
